import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { FormattedMessage } from 'umi-plugin-react/locale';
import { Form, Input, Button, Card, Radio } from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import E from 'wangeditor';
const FormItem = Form.Item;

@connect(({ doc, loading }) => ({
  doc,
  loading: loading.effects['doc/fetchDetail'],
  submitting: loading.effects['doc/updateAdminfo'],
}))
@Form.create()
class EditForm extends PureComponent {
  constructor(props, context) {
    super(props, context);
    this.state = {
      editorContent: '',
    };
  }

  componentDidMount() {
    const { dispatch, match, doc } = this.props;
    const { docDetail = {} } = doc;
    const { params } = match;
    dispatch({
      type: 'doc/fetchDetail',
      payload: params.id,
      callback: () => {
        this.renderEditor();
      },
    });
  }

  handleSubmit = e => {
    const { dispatch, form, doc } = this.props;
    const { docDetail = {} } = doc;
    e.preventDefault();
    form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        values.id = docDetail.id;
        dispatch({
          type: 'doc/fetchUpdateDetail',
          payload: values,
        });
      }
    });
  };
  renderEditor() {
    const { dispatch, match, doc } = this.props;
    const { docDetail = {} } = doc;
    const _this = this;
    const elem = _this.refs.editEditor;
    console.log(elem);
    const editor = new E(elem);
    editor.customConfig.debug = true;
    // 使用 onchange 函数监听内容的变化，并实时更新到 state 中
    editor.customConfig.onchange = html => {
      _this.setState({
        editorContent: html,
      });
    };
    editor.create();
    editor.txt.html(docDetail.content);
  }
  render() {
    const { doc, loading, submitting, form } = this.props;
    const { docDetail = {} } = doc;
    const { getFieldDecorator } = form;

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
        md: { span: 10 },
      },
    };

    const submitFormLayout = {
      wrapperCol: {
        xs: { span: 24, offset: 0 },
        sm: { span: 10, offset: 7 },
      },
    };

    return (
      <PageHeaderWrapper>
        <Card bordered={false} loading={loading}>
          <DemoEidtor />
          <Form onSubmit={this.handleSubmit} hideRequiredMark style={{ marginTop: 8 }}>
            <FormItem {...formItemLayout} label="标题">
              {getFieldDecorator('title', {
                rules: [{ required: true, message: '请输入标题' }],
                initialValue: docDetail.title,
              })(<Input placeholder="输入标题" />)}
            </FormItem>
            <FormItem {...formItemLayout} label="内容">
              <div id="editEditor" ref="editEditor" />
            </FormItem>

            <FormItem {...submitFormLayout} style={{ marginTop: 32 }}>
              <Button type="primary" htmlType="submit" loading={submitting}>
                <FormattedMessage id="form.submit" />
              </Button>
            </FormItem>
          </Form>
        </Card>
      </PageHeaderWrapper>
    );
  }
}

export default EditForm;
